<template>
  <!-- 九宫格 -->
  <div>
    <Ulottery
      @start="onStartClick"
      :prizes="prizes"
      :loading="loading"
      :prizeID="'da_id'"
      :prizeName="'da_name'"
      :prizeIcon="'da_icon'"
      :prizeOrder="[6, 1, 6, 2, 3, 5, 4, 'none']"
    ></Ulottery>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
import Ulottery from '../components/nine/lottery.vue';
import { nextTick, onMounted } from '@vue/runtime-core';
import { showPopup } from '@/components/popup';
// import { Toast } from 'vant';

export default {
  setup() {
    const loading = ref(true);
    const useLottery = () => {
      const prizes = ref([]);
      // 查询抽奖奖品接口
      const getLotteryData = () => {
        window.setTimeout(() => {
          prizes.value = [
            {
              da_id: 1,
              da_name: '10E',
              da_icon: require('../assets/10E.png').default
            },
            {
              da_id: 2,
              da_name: '50E',
              da_icon: require('../assets/50E.png').default
            },
            {
              da_id: 3,
              da_name: '华为',
              da_icon: require('../assets/HUAWEI.png').default
            },
            {
              da_id: 4,
              da_name: '电脑',
              da_icon: require('../assets/macbook.png').default
            },
            {
              da_id: 5,
              da_name: '外卖',
              da_icon: require('../assets/waimai.png').default
            },
            {
              da_id: 6,
              da_name: '口罩',
              da_icon: require('../assets/kouzhao.png').default
            }
          ];
        }, 1000);
      };
      // 自定义的奖品数据 item是单个自定义奖品数据 logo、name、id 是默认来展示和中奖
      // const buildLottery = (item, img) => {
      //   if (item) {
      //     return {
      //       ...item,
      //       logo: item.da_icon,
      //       name: item.da_name,
      //       id: item.da_id
      //     };
      //   } else {
      //     return {
      //       logo: img,
      //       name: '再接再厉',
      //       id: 'none'
      //     };
      //   }
      // };

      // 抽奖
      const onStartClick = (startHandler) => {
        // Toast({
        //   type: 'loading',
        //   message: '抽奖中...',
        //   duration: 300
        // });

        // 抽奖到奖品 -- 数据和奖品列表的格式不太一样
        loading.value = true;
        const prizes = 6; //中奖的奖品id
        const { time, prize } = startHandler(prizes || 'none');
        console.log(time, prize, 'ww');
        loading.value = false;

        setTimeout(() => {
          showPopup(prize); //弹窗
        }, time);
        // const { time, prize } = startHandler(prizes || 'none');
        // start('none'); //未中奖
      };
      return {
        prizes,
        onStartClick,
        buildLottery,
        getLotteryData
      };
    };
    const { prizes, onStartClick, buildLottery, getLotteryData } = useLottery();

    onMounted(() => {
      getLotteryData();
      nextTick();
      setTimeout(() => {
        loading.value = false; // 等待奖品加载出来  请求列表奖品接口等待用
      }, 1000);
    });
    return {
      prizes,
      loading,
      onStartClick,
      buildLottery,
      getLotteryData
    };
  },
  components: {
    Ulottery
  }
};
</script>

<style scoped lang="scss"></style>
